<template>
    <div class="pos_bom">
        <Card :bordered="false" class="box clearfix">
            <p slot="title">BOM信息</p>
             <el-table
                ref='posTreeChild'
                :data="tableData"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'childs'}"
                style="width: 100%"
                v-loading="spinShow"
                @row-click="onRowClick">
                <el-table-column
                    prop="level"
                    label="层次"
                    width="150">
                    <template slot-scope="scope">
                      {{ scope.row.level }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="code"
                    label="物料代码"
                    width="150">
                    <template slot-scope="scope">
                      {{ scope.row.material.code }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    header-align="center"
                    label="物料名称"
                    :width="winSions.w>1200?300:200">
                    <template slot-scope="scope">
                      {{ scope.row.material.name }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="specification"
                    label="规格型号"
                    header-align="center"
                    :width="winSions.w>1300?'auto':'400'">
                     <template slot-scope="scope">
                      {{ scope.row.material.specification }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="物料属性"
                    width="80"
                    align="center">
                    <template slot-scope="scope">
                      {{ scope.row.material.type }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="unit"
                    label="单位"
                    align="center"
                    width="80">
                    <template slot-scope="scope">
                      {{ scope.row.material.unit }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="numerator"
                    label="用量:分子"
                    align="center"
                    width="90">
                </el-table-column>
                <el-table-column
                    prop="denominator"
                    label="用量:分母"
                    align="center"
                    width="90">
                </el-table-column>
            </el-table>
        </Card>
    </div>
</template>
<script>
import winSions from "@/lib/findDimensions";
export default {
    name:"posBom"
    ,props:{
        snInfo:{
            type:Object
            ,default(){
                return {};
            }
        }
        ,spinShow:{
            type:Boolean
            ,default:false
        }
    }
    ,data(){
        return{
            tableData:[]
            ,winSions:winSions
        }
    }
    ,watch:{
        snInfo(newVal){
            let t = this;
            let oData = newVal.ext;
            if(oData&&Object.keys(oData).length&&oData.bom&&Object.keys(oData.bom).length){
                let oPosTree = JSON.parse(JSON.stringify(oData.bom));
                oPosTree.level = 0;
                t.tableData = [t.formatData(oPosTree)];
            }
        }
    }
    ,methods:{
         // 当某一行被点击时会触发该事件
         onRowClick(row){
            let t = this;
            t.$refs.posTreeChild.toggleRowExpansion(row);
         }
        ,formatData(oldData,level = 0,fid = 0){
            let t = this;
           if(oldData.childs&&oldData.childs.length){
                level = level+1;
               oldData.childs = oldData.childs.map( (oChild,idx) => {
                    oChild.level = level;
                    oChild.id = fid?parseInt(fid+''+(idx+1)):parseInt(idx+1);
                    if(oChild.childs&&oChild.childs.length){
                        oChild = t.formatData(oChild,level,oChild.id);
                    }
                    return oChild;
               })    
           }
           return oldData;
        }
    }
}
</script>
<style lang="less">
    .pos_bom{
        padding: 0 20px;
    }
</style>